<!--
 * @Author: chen qi
 * @Date: 2022-07-12 16:48:27
 * @LastEditors: chen qi
 * @LastEditTime: 2022-07-12 17:15:08
 * @Description:
-->
<template>
  <div
    class="full-sreen"
    ref="container"
  >
    <!-- <h1>当前屏幕状态：{{ isFullscreen ? '全屏' : '非全屏' }}</h1> -->
    <slot>
      <el-button
        type="primary"
        @click="fullScreen"
      >{{  isFullscreen ? '收回' : '展开'}} </el-button>
    </slot>
  </div>
</template>

<script>
import commonMixin from '@/utils/mixin'
export default {
  name: 'fullSreen',
  mixins: [commonMixin],
  data() {
    return {
      isFullscreen: false // 是否为全屏状态
    }
  },
  mounted() {
    window.addEventListener('resize', this.judgeCurrentScreen)
  },
  destroyed() {
    window.removeEventListener('resize', this.judgeCurrentScreen)
  },
  methods: {
    // 全屏展示
    fullScreen() {
      this.$fullscreen.toggle()
      // this.$fullscreen.enter(this.$refs.container, {
      //   wrap: false
      // })
    },
    // 判断当前的屏幕是否为全屏状态
    judgeCurrentScreen() {
      // 非全屏状态
      if (!this.checkFull()) {
        this.isFullscreen = false
      }
      // 全屏状态
      if (this.checkFull()) {
        this.isFullscreen = true
      }
    },
    // 判断全屏
    checkFull() {
      // 判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      // 火狐浏览器
      var isFull = document.mozFullScreen ||
        document.fullScreen ||
        // 谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    }
  }
}
</script>

<style lang="less" scoped>
// .full-sreen {
//   width: 100vw;
//   height: 100vh;
// }
</style>
